<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="$t('Penalty_record')"></navbar>
        <div class="content" :class="{'content-warp': list.length > 0}">
            <div class="info-warp" v-if="list.length > 0">
                <div class="total">{{$t('total_penalty_points_deducted')}}：<span class="color_orange">{{fineScord}}</span> {{$t('points')}}</div>
                <div class="base-info" v-for="(item, index) in list" :key="index">
                    <label>
                        <div>{{$t('reason_for_deduction')}}：</div>
                        <div>
                            {{ item.dhBehavior===13 ? item.dhOtherBehavior ? item.dhOtherBehavior : '--' : kouList[item.dhBehavior]}}
                        </div>
                    </label>
                    <label>
                        <div>{{$t('penalty_executor')}}：</div>
                        <div>{{item.usrDisplayBil}}</div>
                    </label>
                    <label>
                        <div>{{ $t('deduction_points')}}：</div>
                        <div class="color_orange">{{item.dhScores}}</div>
                    </label>
                    <label>
                        <div>{{ $t('deduction_time')}}：</div>
                        <div>{{item.dhDateTime}}</div>
                    </label>
                    <label>
                        <div>{{ $t('training_schedule')}}：</div>
                        <div>{{item.ilsTitle}}</div>
                    </label>
                </div>
            </div>
            <div v-else class="box-table" style="width:100%;height: 100%;">
                <div class="box-table-cell" style="text-align: center;">
                    <div class="no-data">
                        <img src="../../../static/images/no-data.png" alt=""/>
                        <p class="color999">{{ $t("no_data") }}</p>
                    </div>
                </div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
export default {
    components: {
        CommonLoading
    },
    data() {
        return {
            isLoading: true,
            itmId: this.$route.params.itmId,
            list: [],
            fineScord: 0 // 扣罚分
        };
    },
    methods: {
        /**
         * 获取课程详情 */
        getDetail() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/face/course/deductions-history`,
                params: {
                    itmId: this.itmId
                }
            }).then((res) => {
                this.list = res.data.historys || [];
                this.fineScord = res.data.allScore || 0;
                this.isLoading = false;
            }).catch(() => {
                this.isLoading = false;
            });
        }
    },
    computed: {
        /**
     * 扣罚行为 */
        kouList() {
            return {
                1: this.$t('penalty_record_tip1'),
                2: this.$t('penalty_record_tip2'),
                3: this.$t('penalty_record_tip3'),
                4: this.$t('penalty_record_tip4'),
                5: this.$t('penalty_record_tip5'),
                6: this.$t('penalty_record_tip6'),
                7: this.$t('penalty_record_tip7'),
                8: this.$t('penalty_record_tip8'),
                9: this.$t('penalty_record_tip9'),
                10: this.$t('penalty_record_tip10'),
                11: this.$t('penalty_record_tip11'),
                12: this.$t('penalty_record_tip12'),
                13: this.$t('penalty_record_tip13')
            };
        }
    },
    mounted() {
        this.getDetail();
    }
};
</script>

<style scoped lang="less">
    .content{
        padding-bottom: 0;
    }
    .content-warp{
        padding: 56px 15px 0;
        overflow-y: scroll;
    }
    .info-warp{
        background: #fff;
        border-radius: 5px;
        margin: 15px 0;
        .total{
            text-align: center;
            border-bottom: 1px solid #eee;
            padding: 10px 0;
        }
    }
    .color_orange{
        color:#f59a23
    }
    .base-info{
        padding: 15px;
        border-bottom: 1px solid #eee;
        > label{
            display: flex;
            align-items: baseline;
            word-break: break-all;
            margin-bottom: 15px;
            >div:first-child{
                flex-shrink: 0;
                color: #7f7f7f;
            }
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
</style>
